<template>
    <!-- components/loding.wxml -->
    <view>
        <view class="loding_wrap flex-row-center" v-if="loading">
            <view class="icon"></view>
            <view class="loding_text">加载更多</view>
        </view>
        <view class="no_more" v-if="noMore">没有更多了</view>
    </view>
</template>

<script>
'use strict'; // components/loding.ts

export default {
    data() {
        return {};
    },
    /**
     * 组件的属性列表
     */
    props: {
        loading: {
            type: Boolean,
            default: false
        },
        noMore: {
            type: Boolean,
            default: false
        }
    }
};
</script>
<style>
/* components/loding.wxss */
.icon {
    background: url();
    background-size: cover;
    width: 34rpx;
    height: 34rpx;
    margin: 0 14rpx;
    animation: loading 0.5s linear infinite;
}
.loding_wrap {
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.no_more {
    color: #9b9b9b;
    font-size: 28rpx;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loding_wrap .loding_text {
    color: #9b9b9b;
    font-size: 28rpx;
}
@keyframes loading {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
</style>
